<template>
  <section class="component">
    <data-box :data="dataSetList" v-if="hidden" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column prop="operatorRealName" label="操作人" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="createTime" :formatter="row => $filter.dateTimeFormat(row.createTime)" label="操作时间" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="changeType" label="变更类型" :formatter="row => $filter.dictConvert(row.changeType,'OperateType')" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="applyStatus" label="审批状态" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <div v-if="scope.row.changeType==='CREATE'">- - -</div>
            <div v-else> {{$filter.dictConvert(scope.row.applyStatus,'ApplyStatus')}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-button @click="showInfo(scope)" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!-- 实体id日志 -->
    <data-box :data="dataSetList" v-else :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column prop="operatorRealName" label="操作人" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="timeCreated" :formatter="row => $filter.dateTimeFormat(row.timeCreated)" label="操作时间" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="operateType" label="变更类型" :formatter="row => $filter.dictConvert(row.operateType,'OperateType')" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="applyStatus" label="审批状态" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <div v-if="scope.row.operateType==='CREATE'">- - -</div>
            <div v-else> {{$filter.dictConvert(scope.row.applyStatus,'ApplyStatus')}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-button @click="showInfo(scope)" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!-- 实体id -->
    <el-dialog title="实体ID策略日志" @close="dialog.config = false" :visible.sync="dialog.config" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body :show-close="true" width="833px" @open="$nextTick(()=>$refs['see-log-item'].refresh())">
      <see-log-item :modifyData="logInfo" ref="see-log-item" @close="dialog.config = false"></see-log-item>
      <!-- 规则剔除 审批记录 -->
    </el-dialog>
    <el-dialog id="scroll" title="审批记录" @close="dialog.RuleApproval = false" :visible.sync="dialog.RuleApproval" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="900px" :show-close="true" @open="$nextTick(()=>$refs['add-rule'].reset())">
      <add-rule :roleData="logInfo" ref="add-rule" @close="dialog.RuleApproval = false"></add-rule>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { Prop } from "vue-property-decorator";
import SeeLogItem from "./see-log-item.vue"
import AddRule from '~/components/strategic-manage/add-rule.vue';
import { RuleRemovedService } from "~/services/domain-service/rule-removed.service"
import { EliminateStrateguLogService } from "~/services/domain-service/eliminate-strategy-log.service"
import { EntityIdService } from "~/services/management-service/entity-id.service";
import { OPERATION_TYPE } from "~/config/enum.config"

@Component({
  components: {
    SeeLogItem,
    AddRule
  }
})
export default class SeeLog extends Vue {
  @Dependencies(EntityIdService)
  private entityIdService: EntityIdService;
  @Dependencies(EliminateStrateguLogService)
  private eliminateStrateguLogService: EliminateStrateguLogService;
  @Dependencies(RuleRemovedService)
  private ruleRemovedService: RuleRemovedService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Prop({
    type: Object
  })
  private modifyData: any;
  private logInfo: any = {};
  private dialog: any = {
    config: false,
    RuleApproval: false,
  }
  // 页面按钮类型
  private operationType: any = OPERATION_TYPE
  private dataSetList: any = []
  private hidden: boolean = false
  private model: any = {
    id: ""
  };
  /**
   * 查看详情
   */
  private showInfo (scope) {
    this.logInfo = { ...scope.row }
    // 实体ID策略日志
    if (this.modifyData.type === 'EntityId') {
      this.dialog.config = true;
    } else if (this.modifyData.type === 'RuleApproval') { // 规则剔除审批日志
      this.operationType.DEFAULT = 'APPROVAL_LOG'
      this.dialog.RuleApproval = true
    }
  }
  private refreshData () {
    this.model.id = this.modifyData.id;
    this.pageService.pageSize = 10
    this.pageService.pageSizeOpts = [10, 20, 30]
    if (this.modifyData.type === 'EntityId') {
      this.entityID()
    } else if (this.modifyData.type === 'RuleApproval') {
      this.rule()
    }
  }
  /**
   * 实体ID修改日志
   */
  private entityID () {
    this.hidden = false
    this.entityIdService
      .logEntityId(this.model, this.pageService)
      .subscribe(data => {
        this.dataSetList = data;
      });
  }
  /**
   * 规则剔除审批记录日志
   */
  private rule () {
    this.hidden = true
    this.ruleRemovedService.queryRuleLogList(this.model, this.pageService).subscribe(data => {
      this.dataSetList = data
    })
  }
}
</script>

<style>
#scroll .el-dialog__body {
  max-height: 600px;
  overflow: auto;
}
</style>